// 执法机关主体信息 编辑
<template>
  <div>
    <a-form-model ref="info_force_unitForm" :rules="rules" :model="info_force_unit">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执法机关名称" prop="agy_name" has-feedback>
        <a-input allow-clear v-model="info_force_unit.agy_name" :maxLength="50" placeholder="请输入执法机关名称" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执法机关类别" prop="agy_ct" has-feedback>
        <a-select allow-clear v-model="info_force_unit.agy_ct" placeholder="请选择执法机关类别">
          <!--枚举不能显示中文，加入这段代码:default-value="info_force_unit.agy_ct == null ? info_force_unit.agy_ct : info_force_unit.agy_ct.toString()"-->
          <a-select-option v-for="(item, key) in agy_ctList" :key="item.id + key" :value="item.id">{{item.description}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执法机关层级" prop="agy_class" has-feedback>
        <a-select allow-clear v-model="info_force_unit.agy_class" placeholder="请选择执法机关层级">
          <!--枚举不能显示中文，加入这段代码:default-value="info_force_unit.agy_class == null ? info_force_unit.agy_class : info_force_unit.agy_class.toString()"-->
          <a-select-option v-for="(item, key) in agy_classList" :key="item.id + key" :value="item.id">{{item.description}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执法类别" prop="agy_type" has-feedback>
        <a-input allow-clear v-model="info_force_unit.agy_type" :maxLength="100" placeholder="请输入执法类别" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="编制人数" prop="org_num" has-feedback>
        <a-input-number v-model="info_force_unit.org_num" :min="0" :max="10" :precision="0" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否公开" prop="public_is" has-feedback>
        <a-select allow-clear v-model="info_force_unit.public_is" placeholder="请选择是否公开">
          <!--枚举不能显示中文，加入这段代码:default-value="info_force_unit.public_is == null ? info_force_unit.public_is : info_force_unit.public_is.toString()"-->
          <a-select-option v-for="(item, key) in public_isList" :key="item.id + key" :value="item.id">{{item.description}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否直属" prop="directly" has-feedback>
        <a-select allow-clear v-model="info_force_unit.directly" placeholder="请选择是否直属">
          <!--枚举不能显示中文，加入这段代码:default-value="info_force_unit.directly == null ? info_force_unit.directly : info_force_unit.directly.toString()"-->
          <a-select-option v-for="(item, key) in directlyList" :key="item.id + key" :value="item.id">{{item.description}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系人姓名" prop="link_name" has-feedback>
        <a-input allow-clear v-model="info_force_unit.link_name" :maxLength="20" placeholder="请输入联系人姓名" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系人电话" prop="link_phone" has-feedback>
        <a-input allow-clear v-model="info_force_unit.link_phone" :maxLength="11" placeholder="请输入联系人电话" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="详细地址" prop="link_addr" has-feedback>
        <a-input allow-clear v-model="info_force_unit.link_addr" :maxLength="30" placeholder="请输入详细地址" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所在部门id" prop="secid" has-feedback>
        <a-input allow-clear v-model="info_force_unit.secid" :maxLength="10" placeholder="请输入所在部门id" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所属区域" prop="bl_aera" has-feedback>
        <a-select allow-clear v-model="info_force_unit.bl_aera" placeholder="请选择所属区域">
          <!--枚举不能显示中文，加入这段代码:default-value="info_force_unit.bl_aera == null ? info_force_unit.bl_aera : info_force_unit.bl_aera.toString()"-->
          <a-select-option v-for="(item, key) in bl_aeraList" :key="item.id + key" :value="item.id">{{item.description}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="设定依据" prop="rely" has-feedback>
        <a-input allow-clear v-model="info_force_unit.rely" :maxLength="1000" placeholder="请输入设定依据" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执法证编号范围" prop="force_sco" has-feedback>
        <a-input allow-clear v-model="info_force_unit.force_sco" :maxLength="100" placeholder="请输入执法证编号范围" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="监督证编号范围" prop="code_sco" has-feedback>
        <a-input allow-clear v-model="info_force_unit.code_sco" :maxLength="100" placeholder="请输入监督证编号范围" />
      </a-form-model-item>
      <a-form-model-item>
        <div class="text-center">
          <a-button class="m-r-8" icon="close" @click="onClose">
            关闭
          </a-button>
          <a-button class="m-r-8" icon="reload" @click="resetForm">
            重置
          </a-button>
          <a-button type="primary" @click="onSubmit" icon="save" :loading="loading">
            保存
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
  import { saveInfo_force_unit, viewInfo_force_unit } from '@/api/info/info_force_unit'

  import Tp_agy_class from '@/enumeration/Tp_agy_class.js'
  import Tp_yesno from '@/enumeration/YesNo.js'

  import Tp_bl_aera from '@/enumeration/Tp_bl_aera.js'
  import { queryEnumerationValuesByName } from '@/api/base/enumeration'

  export default {
    data() {
      return {
        labelCol: { span: 6 }, // label宽
        wrapperCol: { span: 18 }, // 组件宽
        agy_ctList: {}, // 执法机关类别枚举下拉数据

        agy_classList: {}, // 执法机关层级枚举下拉数据
        Tp_agy_class: Tp_agy_class, // Tp_agy_class枚举值，用于状态判断或者参数传值
        public_isList: {}, // 是否公开枚举下拉数据
        Tp_yesno: Tp_yesno, // Tp_yesno枚举值，用于状态判断或者参数传值
        directlyList: {}, // 是否直属枚举下拉数据
        bl_aeraList: {}, // 所属区域枚举下拉数据
        Tp_bl_aera: Tp_bl_aera, // Tp_bl_aera枚举值，用于状态判断或者参数传值
        loading: false, //按钮显示
        info_force_unit: {
          id: null,
          agy_name: null,
          agy_ct: null,
          agy_class: null,
          agy_type: null,
          org_num: null,
          public_is: null,
          directly: null,
          link_name: null,
          link_phone: null,
          link_addr: null,
          secid: null,
          bl_aera: null,
          rely: null,
          force_sco: null,
          code_sco: null,
        }, //执法机关主体信息信息
        rules: {
        },
      }
    },
    created() {
      this.findEnumByName();
    },
    methods: {
      /**
       *  查询枚举值
       */
      findEnumByName() {
        const parameter = [
          { 'enname': 'agy_ct', 'enumName': '' },
          { 'enname': 'agy_class', 'enumName': 'Tp_agy_class' },
          { 'enname': 'public_is', 'enumName': 'Tp_yesno' },
          { 'enname': 'directly', 'enumName': 'Tp_yesno' },
          { 'enname': 'bl_aera', 'enumName': 'Tp_bl_aera' },
        ]
        parameter.forEach(item => {
          queryEnumerationValuesByName({ 'enName': item.enumName }).then(res => {
            console.log('query' + item.enumName, res.data)
            this[`${item.enname}List`] = res.data
            //this[`${item.enname}List`].unshift({ id: '', description: '全部' })
          })
        })
      },
      /**
       * 关闭页面
       */
      onClose() {
        this.$emit('close')
      },
      /**
       * 查询执法机关主体信息信息
       */
      findInfo_force_unitById(id) {
        this.resetForm()

        viewInfo_force_unit(id).then(res => {
          this.info_force_unit = res.data
        })
      },
      /**
       * 重置表单
       */
      resetForm() {
        this.$refs.info_force_unitForm.resetFields();
      },
      /**
       * 提交表单
       */
      onSubmit() {
        this.$refs.info_force_unitForm.validate(valid => {
          this.loading = true
          if (valid) {
            delete this.info_force_unit.agy_ct_text
            delete this.info_force_unit.agy_class_text
            delete this.info_force_unit.public_is_text
            delete this.info_force_unit.directly_text
            delete this.info_force_unit.bl_aera_text
            delete this.info_force_unit.primaryKey
            console.log('submit!', this.info_force_unit)
            const savem = this.$message.loading('数据正在保存中...', 0)
            saveInfo_force_unit(this.info_force_unit).then(res => {
              if (res.code !== 0) {
                setTimeout(savem, 0)
                this.$message.error('执法机关主体信息保存失败')
                this.loading = false
              } else {
                setTimeout(savem, 0)
                this.$message.success('保存成功')
                this.$emit('reloadList')
                this.$emit('close')
                this.loading = false
              }
            })
          } else {
            this.loading = false
            // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
            // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
            setTimeout(() => {
              const isError = document.getElementsByClassName("has-error");
              const input = isError[0].querySelector('input');
              //console.log(input)
              if (input !== null && input !== 'undefind' && input !== '') {
                isError[0].querySelector('input').focus() ? isError[0].querySelector('input').focus() : isError[0].querySelector('input').click()
              } else {
                isError[0].querySelector('textarea').focus()
              }
            }, 10)
            return false;
          }
        });
      },
    }
  }
</script>
<style scoped>
</style>